Esta página é o segundo modelo de utilização da CSS que vale apena ser guardado no cantinho do seu baú de ferramentas. O primeiro foi o menu vertical e este, o segundo, o menu Horizontal que pode ser inserido em qualquer div com um design muito bom.
Há uma clara vantagem em fazer barras de menus ao invés de exibir links dispersos na página. Fica mais fácil para o usuário encontrar o que deseja e não exige que o usuário leia tudo da página para encontrar o que quer.
Nota : Para efeitos didáticos eu desmembrei a solução em passos para que você entenda para que foi feito cada passo.
Utilizei a definição do estilo em partes para cada item no código html.
Então o estilo começa simples e vou agregando itens nele até que fique como queremos.
Contudo, no final, fornecerei o fonte correto sem os truques usados para o aprendizado.
Nota1 : Vamos utilizar uma imagem de fundo degradee para dar um efeito bonito na imagem. Sendo assim a imagem deverá ter a mesma altura da div do menu. No meu caso foi de 40 pixels.
Nota 2 : Nosso menu vai ter x itens na horizontal com uma largura y para cada item. Sendo assim no estilo da ul o tamanho
mínimo será x * y somando ainda o padding e margin dados aos seus itens internos. Portanto, esteja à vontade para alterar
essa largura do item horizontal porque ela depende do número de seus itens bem como da largura destes.
Outra coisa que recomendo é que os itens tenham uma largura aproximadamente iguais. Fica ruim quando um item é muito largo e outro
muito curto.
O menu de itens horizontal é baseado em uma lista não ordenada de items. Vamos começar declarando uma lista com alguns itens.
Código:
<h2>Menu Lateral</h2>
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Produtos</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Fale Conosco</a> </li>
<li> <a href="#">Empresa</a> </li>
</ul>
Como no menu vertical precisamos fazer nossa lista não parecer uma lista mas sim um menu. Vou retirar as margens e a decoração da lista, veja o que muda:
Código:
<style>
.estiloul1{
margin:0;
padding:0;
list-style:none;
}
</style>
<ul class="estiloul1">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Produtos</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Fale Conosco</a> </li>
<li> <a href="#">Empresa</a> </li>
</ul>
Agora vamos colocar alguns estilos para no caso de erro de carga de imagem ou coisa parecida que não fique tão feito. Basicamente vou definir uma largura e uma cor de fundo.
Código:
<style>
.estiloul2 {
margin: 0;
padding: 0;
list-style: none;
width:800px;
background:#159cb0;
}
</style>
<ul class="estiloul2">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Produtos</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Fale Conosco</a> </li>
<li> <a href="#">Empresa</a> </li>
</ul>
Existem certos efeitos que são muito dificeis de serem aplicados porque requerem um conhecimento de css avançado ou mesmo dependendo
do browser sua visualização não fica tão boa. Sendo assim recorremos a métodos antigos como colocar uma imagem de fundo do botão. Com
isto podemos adicionar um fundo degradee ou mesmo uma ou duas divisões de um pixel que dá um efeito 3d na borda do botão. É um método
antigo mas o efeito continua sendo um dos melhores que podemos utilizar.
Vou definir para não repetir a imagem verticalmente, apenas horizontalmente para que o feito degradee fique contínuo, como uma única
imagem.
Outra coisa importante mencionar é que apenas os 40 pixels superiores são dados pela imagem. Os demais são a cor do fundo. Caso queira
ver com clareza esta separação coloque a cor de fundo branca ( #fff ) no estilo do background.
Para baixar a imagem clique aqui
Código:
<style>
.estiloul3 {
margin: 0;
padding: 0;
list-style: none;
width: 800px;
background: #159cb0 url(imagens/fundo-horizontal.png) repeat-x;
}
</style>
<ul class="estiloul3">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Produtos</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Fale Conosco</a> </li>
<li> <a href="#">Empresa</a> </li>
</ul>
Até agora nosso menu não é horizontal mas sim vertical. Isso se deve ao fato que cada li ser exibida com o estilo block.
Colocando o estilo das lis como sendo inline ( display: inline ) corrigimos o estilo e todos os itens irão ser exibidos na mesma linha
mas provocamos outro erro, como o estilo é inline ele não permite, por exemplo, definir a largura do nosso item com 100 pixels
por exemplo. Sendo assim vamos utilizar elementos flutuantes. É o melhor a fazer especialmente em sites responsivos.
Outro item importante a mencionar é que ao utilizar o estilo float-left os itens do menu não ocupam espaço normal dentro da lista
e o menu ficaria bagunçado, o espaço ocupado por um item não seria levado em conta para exibir o próximo e um 'encavalaria' no outro.
Faremos o menu também ser float-left e ai os itens se encaixam um dentro dos outros sem 'encavalamento'.
Código:
<style>
.estiloul4 {
margin: 0;
padding: 0;
list-style: none;
width: 800px;
background: #159cb0 url(imagens/fundo-horizontal.png) repeat-x;
float: left;
}
.estiloli1 {
float: left;
}
</style>
<ul class="estiloul4">
<li class="estiloli1"> <a href="#">Home</a> </li>
<li class="estiloli1"> <a href="#">Serviços</a> </li>
<li class="estiloli1"> <a href="#">Produtos</a> </li>
<li class="estiloli1"> <a href="#">Serviços</a> </li>
<li class="estiloli1"> <a href="#">Fale Conosco</a> </li>
<li class="estiloli1"> <a href="#">Empresa</a> </li>
</ul>
Até agora nosso é um conjunto de links com um formato nada agradável. Vamos trabalhar agora com os liks. Vamos retirar o sublinhado ( text-decoration ) e definir os links como display-block para definir uma altura e largura dele. Darei também um padding para espaçar o elemento na horizontal e um line-height para dar uma altura agradável ao menu.
Nosso menu tá começando a parecer um menu mas precisa de uma separação entre cada item, de uma caracterização de cada elemento.
Para dar esse efeito existe uma outra imagem que são 2 linhas verticais em degradê. Muito bonita.
Note que eu coloquei um repeat-y porque não queremos que o divisor se repita no eixo x senão ficaria cheio de divisores verticais.
Para baixar a imagem clique aqui
Código:
<style>
.estilolink2 {
display: block;
padding: 0 2em;
line-height: 2em;
text-decoration: none;
color: #fff;
background:url(imagens/divisor.png) repeat-y;
}
</style>
<ul class="estiloul4">
<li class="estiloli1"> <a class="estilolink2" href="#">Home</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Serviços</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Produtos</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Serviços</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Fale Conosco</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Empresa</a> </li>
</ul>
<br style="clear:both" />
Nota 1: Eu utilizo o style="clear:both" para que o espaço dos elementos float sejam contabilizados pelo fluxo normal e assim um elemento não encavale no outro, ou seja, o espaço de ambos seja levado em conta pelo browser.
Nota 2 : Aumente o line-height do link caso queira ver o efeito da linha divisora em mais detalhes.
Nota 3 : O default do background-url é top-left por isso a divisória foi exibida dessa maneira.
Chega a ser um perfeicionismo mas você pode notar que na margem esquerda do menu aparece a imagem de divisão. É praticamente invisível mas se você quiser eliminar esta divisória indevida terá que aplicar uma css específica nela. Veja a seguir.
Código:
<style>
.estiloprimeirolink {
background: none;
}
</style>
<ul class="estiloul4">
<li class="estiloli1"> <a class="estilolink2 estiloprimeirolink" href="#">Home</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Serviços</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Produtos</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Serviços</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Fale Conosco</a> </li>
<li class="estiloli1"> <a class="estilolink2" href="#">Empresa</a> </li>
</ul>
<br style="clear:both" />
Um retoque final : Vamos colocar um efeito hover nos itens do menu para que quando o mouse passe por cima ele mude a cor do item.
Código:
<style>
.estilolink3 {
display: block;
padding: 0 2em;
line-height: 2em;
text-decoration: none;
color: #fff;
background: url(imagens/divisor.png) repeat-y;
}
a.estilolink3:hover {
color:#085662;
background:#44cade;
}
</style>
<ul class="estiloul4">
<li class="estiloli1"> <a class="estilolink3 estiloprimeirolink #estilo:hover" href="#">Home</a> </li>
<li class="estiloli1"> <a class="estilolink3 #estilo:hover" href="#">Serviços</a> </li>
<li class="estiloli1"> <a class="estilolink3 #estilo:hover" href="#">Produtos</a> </li>
<li class="estiloli1"> <a class="estilolink3 #estilo:hover" href="#">Serviços</a> </li>
<li class="estiloli1"> <a class="estilolink3 #estilo:hover" href="#">Fale Conosco</a> </li>
<li class="estiloli1"> <a class="estilolink3 #estilo:hover" href="#">Empresa</a> </li>
</ul>
<br style="clear:both" />
